<template>
  <div class="category">
    <lRTitle :text="statusTitle"></lRTitle>
    <div class="circle"></div>
    <div ref="chart" class="pieChart">
    </div>
  </div>
</template>

<script>
import lRTitle from './lRTitle.vue';
import { connrequest2 } from "@/api/firstPage.js"
export default {
  name: "assetHealth",
  components: { lRTitle },
  data() {
    return {
      statusTitle: "资产健康概览"
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    async initChart() {
      let that = this
      const res = await connrequest2('GetDeviceHardwareSumGroupByHealth')
      const arr = res.Data.Device
      const myChart = this.$echarts.init(this.$refs.chart);
      // 使用南丁格尔玫瑰图配置
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: { show: false },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '50%'],
          color: ['#22ddfd', '#1d72fa', '#fec127', '#46e09f'],
          label: {
            show: true,
            formatter: function (params) {
              return `{name|${params.name}}\n\n{percent|${params.percent}%}`; // 使用 rich 标签区分名称和百分比
            },
            color: '#fff', // 默认颜色（名称部分）
            fontSize: 14,
            position: 'outside',
            rich: {
              name: {
                color: '#fff', // 名称部分颜色
                fontSize: 14
              },
              percent: {
                color: '#3BBFFE', // 百分比部分设为蓝色（可以替换为任何颜色值，如 '#0000FF'）
                fontSize: 16
              }
            },
          },
          labelLine: {
            show: true,
            length: 25,
            length2: 50,
            lineStyle: { width: 1 }
          },
          itemStyle: {
            borderWidth: 2
          },
          data: that.convertDeviceToData(arr)
        }]
      };

      myChart.setOption(option);
      window.addEventListener('resize', myChart.resize);
    },
    convertDeviceToData(device) {
      // 验证输入对象是否存在且包含必要字段
      if (!device || typeof device !== 'object') {
        return [
          { value: 0, name: '标准资产' },
          { value: 0, name: '低配资产' },
          { value: 0, name: '高龄资产' },
          { value: 0, name: '高龄低配' },
        ];
      }
      const {
        HealthDeviceCount = 0,
        LowerDeviceCount = 0,
        OldDeviceCount = 0,
        LowerOldDeviceCount = 0,
      } = device;
      // 确保值是非负数
      const data = [
        { value: Math.max(0, HealthDeviceCount), name: '标准资产' },
        { value: Math.max(0, LowerDeviceCount), name: '低配资产' },
        { value: Math.max(0, OldDeviceCount), name: '高龄资产' },
        { value: Math.max(0, LowerOldDeviceCount), name: '高龄低配' },
      ];
      return data.filter(item => item.value > 0);
    },
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.$refs.chart.resize);
  }
}
</script>

<style scoped>
.category {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 28%;
}

.pieChart {
  flex: 1;
  background: url('../../../assets/aiScreen/device@2x.png') no-repeat center;
  background-size: 24%;
}

.circle {
  position: absolute;
  width: 8vw;
  height: 8vw;
  border: 1px solid #071f34;
  border-radius: 50%;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>